<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <!-- 引入 css 样式 -->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
</head>

<body>
    <div class="nav">
        五子棋对战
    </div>
    <div class="container">
        <!-- 注册界面对话框 -->
        <div class="login-dialog">
            <!-- 提示信息 -->
            <h3>注册</h3>
            <!-- 这个表示一行 -->
            <div class="row">
                <span>用户名</span>
                <input type="text" id="username">
            </div>
            <!-- 这是另一行 -->
            <div class="row">
                <span>密码</span>
                <!-- 类型为 password 用户输入密码时就会变成‘·’ -->
                <input type="password" id="password">
            </div>
            <div class="row">
                <span>确认密码</span>
                <input type="password" id="ackpassword">
            </div>
            <!-- 提交按钮 -->
            <div class="row">
                <button id="submit">提交</button>
            </div>
            <div class="row">
                <a href="/login.html">返回</a>
            </div>
        </div>

    </div>

    <!-- 引入 jQuery 代码 -->
    <script src="js/jquery.min.js"></script>
    <script>
        let usernameInput = document.querySelector('#username');
        let passwordInput = document.querySelector('#password');
        let ackpasswordInput = document.querySelector('#ackpassword');
        let submitButton = document.querySelector('#submit');
        // 点击提交按钮后触发的操作
        submitButton.onclick = function () {
            // 如果"密码"输入框中的内容与"确认密码"输入框中内容不一致
            // 那就不应该进行后续注册的逻辑,需要重新输入密码
            // 并且密码和用户名不应该为空
            if (passwordInput.value && usernameInput.value && ackpasswordInput.value == passwordInput.value) {
                // 下面的前后端交互的数据格式在,设计前后端接口时就规定好了
                $.ajax({
                    type: 'post',
                    url: '/register',
                    data: {
                        // 获取到输入的用户名和密码
                        username: usernameInput.value,
                        password: passwordInput.value,
                    },
                    // 请求执行成功之后的回调函数
                    success: function (body) {
                        // 判定当前是否注册成功
                        // 注册成功,服务器会返回注册好的 User 对象
                        // 注册失败,服务器会返回一个空的 User 对象
                        if (body && body.userId > 0) {
                            // 注册成功
                            alert("注册成功!");
                            // 重定向回登录界面
                            location.assign('/login.html');
                        } else {
                            // 注册失败
                            alert("该用户名已被注册!!");
                        }
                    },
                    // 请求执行失败之后的回调函数
                    error: function () {
                        // 注册失败
                        alert("注册失败,该用户名已被注册!");
                    }
                });
            } else if(passwordInput.value && usernameInput.value) {
                alert("两次密码输入不一致,请重新输入!!");
            } else if(usernameInput.value) {
                alert("密码不能为空!!");
            } else {
                alert("用户名不能为空!!");
            }
        }
    </script>
</body>

</html>